<template>
  <div class="app-container">

    <el-row :gutter="20" style="margin-bottom: 12px">
      <el-col :span="24">
        <el-card class="box-card" body-style="min-height:240px">
          <MmvTitle title="新订单通知"><span slot="issue">（注：开通后，若客户在小程序下单，相关人员即可收到短信通知）</span></MmvTitle>

          <div class="s_title">通知内容：</div>
          <el-input v-model="content0" type="textarea"></el-input>

          <div class="s_title"><span class="require">*</span>门店配置：</div>

          <el-table :data="storeList" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column align="center" label="门店名称" prop="name"></el-table-column>
            <el-table-column align="center" label="新订单通知人员" prop="member"></el-table-column>
            <el-table-column align="center" label="操作">
              <template v-slot="scope">
                <div style="color: #0d65eb;cursor: pointer" @click="showMember(scope.row)">设置人员</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="启用/禁用" prop="isActive">
              <template v-slot="scope">
                <el-switch v-model="scope.row.isActive"></el-switch>
              </template>
            </el-table-column>
          </el-table>

        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-bottom: 12px">
      <el-col :span="24">
        <el-card class="box-card" body-style="min-height:240px">
          <MmvTitle title="业务员通知"><span slot="issue">（注：开通后，将订单分配给业务员，业务员即可收到短信通知）</span></MmvTitle>

          <div class="s_title">通知内容：</div>
          <el-input v-model="content1" type="textarea"></el-input>

          <div class="s_title"><span class="require">*</span>门店配置：</div>

          <el-table :data="storeList" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column align="center" label="门店名称" prop="name"></el-table-column>
            <el-table-column align="center" label="启用/禁用" prop="isActive">
              <template v-slot="scope">
                <el-switch v-model="scope.row.isActive"></el-switch>
              </template>
            </el-table-column>
          </el-table>

        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-bottom: 12px">
      <el-col :span="24">
        <el-card class="box-card" body-style="min-height:240px">
          <MmvTitle title="用户取车通知"><span slot="issue">（注：开通后，距离客户取车2小时，推送短信至客户手机）</span></MmvTitle>

          <div class="s_title">到店取车通知内容：</div>
          <el-input v-model="content2" type="textarea"></el-input>

          <div class="s_title">上门送车通知内容：</div>
          <el-input v-model="content3" type="textarea"></el-input>

          <div class="s_title"><span class="require">*</span>门店配置：</div>

          <el-table :data="storeList" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column align="center" label="门店名称" prop="name"></el-table-column>
            <el-table-column align="center" label="启用/禁用" prop="isActive">
              <template v-slot="scope">
                <el-switch v-model="scope.row.isActive"></el-switch>
              </template>
            </el-table-column>
          </el-table>

        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-bottom: 12px" v-if="checkPermi(['car:alarm:list'])">
      <el-col :span="24">
        <el-card class="box-card" body-style="min-height:240px">
          <MmvTitle title="告警通知"><span slot="issue">（注：开通后，若车辆触发GPS告警，相关人员即可收到短信通知）</span></MmvTitle>

          <div class="s_title">通知内容：</div>
          <el-input v-model="content4" type="textarea"></el-input>


          <div class="s_title"><span class="require">*</span>门店配置：</div>

          <el-table :data="storeList" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column align="center" label="门店名称" prop="name"></el-table-column>
            <el-table-column align="center" label="通知人员" prop="member"></el-table-column>
            <el-table-column align="center" label="告警类型" prop="warn"></el-table-column>
            <el-table-column align="center" label="操作" prop="">
              <template v-slot="scope">
                <div style="color: #0d65eb;cursor: pointer" @click="setMember(scope.row)">设置人员</div>
                <div style="color: #0d65eb;cursor: pointer" @click="deleteMember(scope.row)">删除</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="启用/禁用" prop="isActive">
              <template v-slot="scope">
                <el-switch v-model="scope.row.isActive"></el-switch>
              </template>
            </el-table-column>
          </el-table>

          <div style="display: flex;justify-content: center;align-items: center;margin-top: 20px">
            <el-button type="">刷新</el-button>
            <el-button type="primary" @click="submitForm">
              保存
            </el-button>
          </div>

        </el-card>
      </el-col>
    </el-row>


    <el-dialog title="人员配置" width="1000px" append-to-body destroy-on-close :visible.sync="showMemberDialog">
      <MemberSet v-if="showMemberDialog" @success="sumitSetMember" @cancel="showMemberDialog = false"></MemberSet>
    </el-dialog>


    <el-dialog title="人员配置" width="600px" append-to-body destroy-on-close :visible.sync="setMemberDialog">

      <el-form :model="setMemberParam" label-width="80px">
        <el-form-item label="告警类型" prop="carNo" required>
          <el-input
            v-model="setMemberParam.name"
            placeholder="请选择告警类型,多选"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="通知人员" prop="carNo" required>
          <el-input
            v-model="setMemberParam.name"
            placeholder="请选择人员,单选"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>


      </el-form>

      <div class="bottom-layout">
        <el-button type="primary" @click="commit">确定</el-button>
        <el-button @click="cancelQuery">取消</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import MmvTitle from "@/components/MmvUI/MmvTitle.vue";
import MemberSet from "./memberSet";
import {checkPermi} from '@/utils/permission'

export default {
  components: {
    MmvTitle,
    MemberSet
  },
  data() {
    return {
      content0: '您有一笔新订单！客户{名称}或{手机号码}已预定：{品牌/车系}，请及时处理。',
      content1: '已为您分配新订单：{订单号}，请及时处理！',
      content2: '尊敬的用户：您有一笔租车订单已临近取车时间，请及时前往{取车门店}取车。友情提示：请携带本人身份证、驾驶证前往。',
      content3: '尊敬的用户：您有一笔租车订单已临近用车时间，业务员将为您送车上门。',
      content4: '车辆{车牌号}绑定的设备{设备编码}触发{告警类型}，定位地点为：{定位地点}。关联用车中订单{订单编号}，客户为{客户姓名 客户联系电话}。',
      storeList: [
        {
          name: 'A门店',
          member: "店长A、员工B、员工C......",
          isActive: true
        },
        {
          name: 'B门店',
          member: "",
          isActive: false
        },
      ],
      showMemberDialog: false,
      setMemberDialog: false,
      setMemberParam: {}
    }
  },
  methods: {
    checkPermi,
    showMember(itemData) {
      this.showMemberDialog = true
    },

    deleteMember(itemData) {
      this.$confirm('确定删除吗', '提示',).then(res => {

      })
    },

    setMember(itemData) {
      this.setMemberDialog = true
    },

    sumitSetMember() {

    },

    submitForm() {

    },
    commit(){

    },
    cancelQuery(){

    },
    handleQuery(){

    },

  }

}
</script>

<style lang="scss" scoped>
.s_title {
  font-weight: bold;
  color: #333;
  font-size: 15px;
  line-height: 40px;
  position: relative;
  margin: 10px 0;
}

.require {
  color: red;
  position: absolute;
  left: -8px;
  top: 3px;
}

.bottom-layout {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 40px 0 0;
}

</style>
